<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <c-select
          :options="enumRepayApprovalStatus"
          @change="getData()"
          clearable
          placeholder="代偿状态"
          v-model="params['project_status.eq']"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <select-date-cascader
          placeholder="发起日期"
          class="form-control-ml"
          v-model="pickDateCreate"
          @select="handleDateCreateChange"
        ></select-date-cascader>
      </el-form-item>
      <el-form-item>
        <select-date-cascader
          placeholder="代偿日期"
          class="form-control-ml"
          @select="handleDateCreateChange"
          v-model="pickRepayDate"
        ></select-date-cascader>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <repay-apply-dialog :visible.sync="visible" :id="batchId"></repay-apply-dialog>
  </div>
</template>

<script>
import { enumRepayApprovalStatus, enumUnguaApprovalStyle } from '@/bank/views/limit/postloan/mixins'
import RepayApplyDialog from '@/bank/views/business/limit/history/repay/RepayApplyDialog'
import SelectDateCascader from '@/components/select/SelectDateCascader'
import { parseCascaderDate } from '@/bank/views/limit/index'
import { limitNormalParams } from '@/bank/views/business/limit/history/mixins'
export default {
  components: {
    RepayApplyDialog,
    SelectDateCascader,
  },
  mixins: [limitNormalParams],
  data() {
    return {
      enumRepayApprovalStatus,
      loading: false,
      params: {
        index: 1,
        size: 10,
        'import_status.eq': '',
        'is_replace.eq': '',
        'channel_type.eq': 0,
        'is_rural_dev.eq': 0,
      },
      order: {
        create_time: 'desc',
      },
      tableName: 'un_gua_comps_batch',
      tableData: [],
      tableCount: 0,
      tableColumns: [
        { attrs: { label: '代偿批号', prop: 'batch_no', minWidth: 140 } },
        { attrs: { label: '代偿数量', prop: 'project_count', align: 'center' } },
        {
          attrs: { label: '代偿总额(元)', prop: 'project_funds', align: 'center', minWidth: 100 },
        },
        { attrs: { label: '提供机构', prop: 'submit_client_name', align: 'center' } },
        { attrs: { label: '发起日期', prop: 'createTime', align: 'center', minWidth: 100 } },
        { attrs: { label: '代偿日期', prop: 'repayTime', align: 'center', minWidth: 100 } },
        {
          attrs: { label: '代偿状态', prop: 'projectStatusLabel', align: 'center' },
          process: (_, row) => ({ attrs: { class: `text-${row.projectStatusStyle}` } }),
        },
        {
          attrs: { label: '操作', align: 'center', width: '80px' },
          operations: [
            { name: '查看', event: this.handleView },
            // { name: '删除', event: this.handleDelete }
          ],
        },
      ],
      batchId: '',
      visible: false,
      pickDateCreate: [],
      pickRepayDate: [],
    }
  },

  created() {
    this.getData()
  },
  methods: {
    handleDateCreateChange(val = []) {
      const [start, end] = parseCascaderDate(val)
      this.params['create_time.gte'] = start
      this.params['create_time.lte'] = end
      this.getData()
    },
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          {
            ...this.normalSubmitParams,
            ...this.params,
          },
          this.order
        )
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = (data?.data ?? []).map(this.dataAdapter)
          this.tableCount = data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.repayTime = '-'
      item.projectStatusLabel = enumRepayApprovalStatus[item.project_status]
      item.projectStatusStyle = enumUnguaApprovalStyle[item.project_status]
      item.createTime = this.$utils.dateFormat(item.create_time, 'yyyy-MM-dd')
      return item
    },
    handleView(row = {}) {
      this.visible = true
      this.batchId = row.un_gua_comps_batch_id
    },
    handleDelete(row = {}) {
      this.$api.deleteData(this.$serviceName, this.tableName, row.un_gua_comps_batch_id)
    },
  },
}
</script>
<style lang="scss" scoped></style>
